<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../common/style/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../common/lib/swiper/swiper-4.0.5.min.css">
    <link rel='stylesheet prefetch' href='../../common/style/photoswipe.css'>
    <link rel='stylesheet prefetch' href='../../common/style/default-skin.css'>
    <link rel="stylesheet" type="text/css" href="../../common/style/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../../common/style/house.css" />
    <script src="../../common/lib/jquery-1.11.2.min.js"></script>
    <script src="../../common/lib/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../common/js/weixin.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../../common/js/share.js"></script>
    <script src="../../common/request/request.js?version=1.0.12"></script> 
    <script src="./js/build-house.js?version=1.0.12"></script>
    <style>
        .pingjia .mui-comments:last-child .mui-content {
            padding-bottom: .5rem;
        }

        .top-four .header-nav li {
            width: 33%
        }
    </style>

</head>

<body class="layout-w">
    <div id="build-house">
    <div class="aui-content-padded" style="margin-top:.4rem;">
        <div class="top-search aui-clearfix">
            <div class="aui-pull-left">
                <img src="../../common/images/logo-2.svg">
            </div>
            <div class="aui-pull-right more-info">
                <a href="javascript:;" style="padding-left:.5rem;">
                    <img src="../../common/images/more.svg" style="vertical-align: middle;width:.9rem;">
                </a>
                <ul>
                    <li><a href="/home/html/">首页</a></li>
                    <li><a href="../search/search-result-build.html">搜索选址</a></li>
                    <li><a href="../commiss/demand-entry.html">委托找房</a></li>
                    <li><a href="../others/enterDevelopers.html">入驻平台</a></li>
                </ul>
            </div>
            <div class="aui-pull-right" style="width:50%;">
                <form>
                    <div class="header-cearch">
                        <i class="fa fa-search"></i>
                        <input class="header-search-input" type="text" placeholder="搜索联合办公">
                    </div>
                </form>
            </div>
        </div>
        <div class="main-info">
            <div class="aui-info">
                <div class="aui-info-item">
                    <h2 class="title">华贸中心<span class="small-title"><small>浏览量2.2w</small></span></h2>
                </div>
                <div class="aui-info-item"><span class="blue">30</span>&nbsp;元/m²·天</div>
            </div>
            <div class="aui-info" style="padding-top:.15rem;">
                <div class="aui-info-item"><small>朝阳区·CBD-大望路｜2007年建成</small></div>
                <div class="aui-info-item"><small>200人关注</small></div>
            </div>
            <div class="black-bg" style="height:5rem;"></div>
        </div>
        <div class="top-four" id="nav-container">
            <ul class="cell header-nav" id="nav-box">
                <li data-type="nav" data-index="0" class="active"><a href="javascript:;">房源</a></li>
                <li class="split"></li>
                <li data-type="nav" data-index="2"><a href="javascript:;">详情</a></li>
                <li class="split"></li>
                <li data-type="nav" data-index="3"><a href="javascript:;">配套</a></li>
            </ul>
        </div>
        <div id="container">
            <div class="first-child" id="first-child">
                <div class="new-location aui-margin-t-10">
                    <div class="line-1" style="font-weight:normal;">
                        <img src="../../common/images/union/icon-location.svg">建国路79、80、81号
                    </div>
                </div>
                <div class="three-d aui-margin-t-10">
                    <!-- 这里放3d模型 -->
                    <div class="model" style="display:none;">
                        <div class="modelchange">
                            <a href="javascript:;" name="model-button-1"
                                class="mode-button active"><small>3D楼盘</small></a>&nbsp;|
                            <a href="javascript:;" name="model-button-2" class="mode-button"><small>全景周边</small></a>
                            <div class="invisible-mode" name="invisible-mode-button" data-type="model-button-1"
                                style="left:0"></div>
                            <div class="invisible-mode" name="invisible-mode-button" data-type="model-button-2"
                                style="right:0;width:4em;"></div>
                        </div>
                        <img src="../../common/images/d-4.jpg">
                    </div>
                    <!-- 这里放3d模型 -->
                    <!-- 这里放图片 -->
                    <div class="picture" id="picture">
                        <div class="swiper-container swiper-description" alt="Image description">
                            <div class="my-gallery swiper-wrapper">
                                <div class="swiper-slide" v-for="item in buildImg">
                                    <a :href="item.imgUrl" data-size="1024x1024"><img :src="item.imgUrl" /></a>
                                    <figcaption itemprop="caption description">图片1</figcaption>
                                </div>
                                <!-- <div class="swiper-slide">
                                    <a href="../../common/images/h-2.jpg" data-size="1024x1024"><img src="../../common/images/h-2.jpg" /></a>
                                    <figcaption itemprop="caption description">图片2</figcaption>
                                </div>
                                <div class="swiper-slide">
                                    <a href="../../common/images/h-1.jpg" data-size="1024x1024"><img src="../../common/images/h-1.jpg" /></a>
                                    <figcaption itemprop="caption description">图片3</figcaption>
                                </div> -->
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <img src="../../common/images/logo-lighter.png" class="watermark">
                    </div>
                    <!-- 这里放图片 -->
                    <div class="button">
                        <a href="javascript:;" name="three-d-button-1" data-type="model" class="three-d-a"
                            style="margin-right:.2rem;"><small>3D</small></a>
                        <a href="javascript:;" name="three-d-button-2" data-type="pic" class="three-d-a active"
                            style="font-size:.65rem;margin-left: .2rem;"><small>&nbsp;图片</small></a>
                        <div class="three-d-invisible" data-type="three-d-button-1" style="left:0"></div>
                        <div class="three-d-invisible" data-type="three-d-button-2" style="right:0"></div>
                    </div>
                </div>
                <ul class="choose aui-clearfix">
                    <li>
                        面积&nbsp;
                        <a href="javascript:;">小</a>
                        <a href="javascript:;">中</a>
                        <a href="javascript:;" class="active">大</a>
                    </li>
                    <li style="width:100%;">
                        楼层&nbsp;
                        <a href="javascript:;">低</a>
                        <a href="javascript:;">中</a>
                        <a href="javascript:;" class="active">高</a>
                        <a href="javascript:;">超高</a>
                    </li>
                </ul>
                <!-- 这是搜索无结果的样式，请按需使用 -->
                <!-- <div class="other-list" style="text-align:center;padding: 2rem 0;">
                    <img src="../../common/images/no-result-icon.svg">
                </div> -->
                <!-- 这是搜索有结果的样式，请按需使用 -->
                <div class="other-list aui-clearfix">
                    <div class="swiper-container swiper-lou">
                        <div class="swiper-wrapper" style="width:97%;margin-left:3%;">
                            <div class="swiper-slide" v-for="item in houseList">
                                <div class="details">
                                    <div class="pic">
                                        <img :src="item.imgUrl" style="display: inline;">
                                    </div>
                                    <div class="remark aui-clearfix">
                                        <div class="line-1 aui-clearfix">
                                            <div class="pull-left"><a href="javascript:;">{{item.area}}m²｜{{item.floor}}层</a></div>
                                            <div class="pull-right">
                                                <span class="zhizu-plan"><small>{{directFlag == '1'?'直租计划':''}}</small></span>
                                            </div>
                                        </div>
                                        <div class="aui-clearfix detail-info">
                                            <div class="pull-left" style="padding-top:.1rem;"><small>浏览量</small>39</div>
                                            <div class="pull-right">
                                                <small>约</small><big>{{item.monthPrice}}</big>
                                                <small>万/月</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 只显示一个按钮的情况，选择其中一个展示 -->
                    <!-- <a class="lou-button" href="4.2-全部待租空间(房源)列表.html" style="margin-bottom:0;">全部房源</a>
                    <a class="lou-button" href="javascript:;" style="margin-bottom:0;">联合办公</a> -->
                    <!-- 只显示一个按钮的情况，选择其中一个展示 -->

                    <!-- 两个按钮同时显示的情况 -->
                    <div class="lou-button-list aui-clearfix">
                        <a class="lou-button-inner aui-pull-left" href="4.2-全部待租空间(房源)列表.html" style="margin-bottom:0;">全部房源</a>
                        <a class="lou-button-inner aui-pull-right" href="javascript:;" style="margin-bottom:0;">联合办公</a>
                    </div>
                    <!-- 两个按钮同时显示的情况 -->
                </div>
            </div>
            <div class="third-child" id="third-child">
                <div class="gaikuang aui-margin-t-10" style="position:relative;">
                    <h3 class="common-title-h3" id="goToDetail">楼盘详情</h3>
                    <h4 class="second-name">楼盘概况</h4>
                    <ul class="aui-margin-t-5 aui-clearfix">
                        <li class="li-inline">
                            <span>建成年代：</span>
                            <a>{{houseInfo.buildingYear}} 年</a>
                        </li>
                        <li class="li-inline">
                            <span>建筑面积：</span>
                            <a>{{houseInfo.totalArea}} m²</a>
                        </li>
                        <li class="li-inline">
                            <span>所属商圈：</span>
                            <a>{{houseInfo.tradingArea}}</a>
                        </li>
                        <li class="li-inline">
                            <span>楼栋数量：</span>
                            <a>{{houseInfo.totalNum}} 栋</a>
                        </li>
                        <li>
                            <span>最高楼层：</span>
                            <a>{{houseInfo.totalFloors}} 层</a>
                        </li>
                        <li>
                            <span>所在环线：</span>
                            <a>{{houseInfo.loopName}}</a>
                        </li>
                        <li>
                            <span
                                style="width:3rem;text-align: justify;text-justify: inter-ideograph;height:1.2rem;">开发商：
                                <span style="display: inline-block;padding-left: 100%;"></span>
                            </span>
                            <a>{{houseInfo.developer}}</a>
                        </li>
                        <li>
                            <span>楼盘地址：</span>
                            <a>{{houseInfo.address}}</a>
                        </li>
                    </ul>
                    <h4 class="second-name">硬件设施</h4>
                    <ul class="aui-margin-t-5">
                        <li>
                            <span>客梯数量：</span>
                            <a>{{houseInfo.elevatorNum}} 部</a>
                        </li>
                        <li>
                            <span>停车设施：</span>
                            <a>地下停车场:{{houseInfo.overParking}} | 地上停车位:{{houseInfo.underParking}}</a>
                        </li>
                        <li>
                            <span
                                style="width:3rem;text-align: justify;text-justify: inter-ideograph;height:1.2rem;">空调：
                                <span style="display: inline-block;padding-left: 100%;"></span>
                            </span>
                            <a>{{houseInfo.airConditioning}}</a>
                        </li>
                    </ul>
                    <h4 class="second-name">入驻企业</h4>
                    <div class="side-house aui-margin-t-5" style="width:100%;margin:0;">
                        <p class="comlist">{{houseInfo.inCompanys}}</p>
                    </div>
                    <h4 class="second-name">物业服务</h4>
                    <ul class="aui-margin-t-5">
                        <li>
                            <span>物业公司：</span>
                            <a>{{houseInfo.managementCompany}}</a>
                        </li>
                        <li>
                            <span
                                style="width:3rem;text-align: justify;text-justify: inter-ideograph;height:1.2rem;">物业费：
                                <span style="display: inline-block;padding-left: 100%;"></span>
                            </span>
                            <a>{{houseInfo.managementFee}} 元/m² · 天</a>
                        </li>
                        <li>
                            <span>特色服务：</span>
                            <a>{{houseInfo.featureService}}</a>
                        </li>
                    </ul>
                    <h4 class="second-name">楼盘简介</h4>
                    <div class="dis">
                            {{houseInfo.buildingIntroduce}}
                    </div>
                </div>
            </div>
            <div class="fourth-child" id="fourth-child">
                <div class="around" style="margin-bottom: .5rem;">
                    <h3 class="common-title-h3 mt-1">周边配套</h3>
                    <!-- 这里放地图，style中的样式后期可去掉 -->
                    <div class="map" style="background:#eee;"></div>
                    <!-- 这里放地图，style中的样式后期可去掉 -->
                </div>
                <div class="around-tui">
                    <h3 class="common-title-h3">周边推荐</h3>
                    <div class="out" v-for="item in recommendList">
                        <div class="more-house-list">
                            <div class="pic">
                                <a href="javascript:;"><img src="../../common/images/3D.svg"></a>
                                <img :src="item.imgUrl">
                            </div>
                            <div class="remark aui-clearfix">
                                <div class="line-1 aui-ellipsis-1">{{item.buildingName}}</div>
                                <div class="aui-info">
                                    <div class="aui-info-item"><small>{{item.minArea}}m²-{{item.maxArea}}m²在租</small></div>
                                </div>
                                <div class="aui-info">
                                    <div class="aui-info-item zhizu-plan"><small>{{directFlag == '1'?'直租计划':''}}</small></div>
                                    <div class="aui-info-item"><big>{{item.price}}</big><small> 元/m²·天</small></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dibu-qrcode">
            <div class="bottom-line">
                <h5>关注公众号，选址更方便</h5>
                <div class="bg-line"></div>
            </div>
            <img src="../../common/images/qrcode.svg">
        </div>
        <!-- 底部 -->
        <footer>
            <img src="../../common/images/union/footer.svg" style="width:100%;">
        </footer>
        <!-- 底部 -->
    </div>
    <!-- 大图 -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>
        <div class="pswp__scroll-wrap">
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 大图 -->
    <div class="white-4"></div>
    <a class="back-to-top" href="javascript:;" style="bottom:2.8rem;">
        <img src="../../common/images/totop.svg">
    </a>
    <div class="bottom-fixed">
        <div class="line-2 aui-clearfix">
            <a class="aui-pull-left" href="javascript:;"><img src="../../common/images/location-address.svg">导 航</a>
            <a class="aui-pull-left" href="javascript:;"><img src="../../common/images/location-phone.svg">电 话</a>
            <a class="aui-pull-left" href="javascript:;"><img src="../../common/images/favorite.svg" style="width:.65rem;">关 注</a>
        </div>
    </div>
    </div>
    <script src="../../common/lib/swiper/swiper-4.0.5.min.js"></script>

    <script>
        var navContainer = document.getElementById("nav-container");
        var navBox = document.getElementById("nav-box");
        var text = document.getElementById("container");
        var navBoxChild = new Array();

        for (i = 0; i < navBox.children.length; i++) {
            if (i % 2 == 0) {
                navBoxChild.push(navBox.children[i]);
            }
        }

        var textChild = text.children;
        var a = navContainer.offsetHeight;

        /**从地址栏中获取参数值**/
        function request(paras) {
            var url = location.href;
            var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
            var paraObj = {};
            for (i = 0; j = paraString[i]; i++) {
                paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
            }
            var returnValue = paraObj[paras.toLowerCase()];
            if (typeof (returnValue) == "undefined") {
                return "";
            } else {
                return returnValue;
            }
        }

        $(document).ready(function () {
            var mySwiper = new Swiper('.swiper-threed', {
                autoplay: true,
                direction: 'horizontal',
                pagination: {
                    el: '.swiper-pagination',
                    type: 'custom',
                    renderCustom: function (swiper, current, total) {
                        return current + ' / ' + total;
                    }
                },
            })
            setTimeout(function(){
                var swiper = new Swiper('.swiper-lou', { slidesPerView: 'auto', loop: false, direction: 'horizontal', freeMode: true });
                var swiper = new Swiper('.swiper-description', { slidesPerView: 'auto', loop: false, direction: 'horizontal', freeMode: true });                
            },500)

            //3D部分
            $('.invisible-mode').on('click', function () {
                var aim = $(this).attr('data-type');
                $('.mode-button').removeClass('active');
                $('a[name="' + aim + '"]').addClass('active');
            })

            $('.three-d-invisible').on('click', function () {
                var aim = $(this).attr('data-type');
                $('.three-d-a').removeClass('active');
                $('a[name="' + aim + '"]').addClass('active');

                if ($('a[name="' + aim + '"]').attr('data-type') == 'model') {
                    $('.model').show();
                    $('.picture').hide();
                } else {
                    $('.picture').show();
                    $('.model').hide();
                }
            })

            //滚动到指定位置
            $('li[data-index="0"]').click(function () { $('html,body').animate({ scrollTop: $('.first-child').offset().top }, 500); });
            $('li[data-index="2"]').click(function () { $('html,body').animate({ scrollTop: $('.third-child').offset().top - 40 }, 500); });
            $('li[data-index="3"]').click(function () { $('html,body').animate({ scrollTop: $('.fourth-child').offset().top - 40 }, 500); });

            //跳转
            $('#goToPingjia').on('click', function () {
                window.location.href = "4.5-楼盘评价列表.html";
            })
            $('#goToZu').on('click', function () {
                window.location.href = "4.6-楼盘评价录入-看房.html";
            })

            $('.map').on('click', function () {
                location.href = "4.15-地图.html";
            })

            //房源信息详情页面跳转处理
            var type = request('type');
            // if (type == 'goToDetail') {//详情
            //     $('html,body').animate({ scrollTop: $('.third-child').offset().top - 40 }, 800);
            // }
            if (type == 'goToAll') {//房源
                $('html,body').animate({ scrollTop: $('.first-child').offset().top }, 500);
            }

            //回到顶部
            window.onscroll = function () {
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if (scrollTop >= 100) {
                    $('.back-to-top').fadeIn();
                } else {
                    $('.back-to-top').fadeOut();
                }

                //顶部四个栏目的显示
                if (scrollTop >= 20) {
                    $('.top-four').fadeIn();
                } else {
                    $('.top-four').fadeOut();
                }

                var scrollHeight = $(document).height(); //整个文档的高度
                var windowHeight = $(this).height(); //当前可见区域的大小

                //当导航与相应文档接触的时候自动切换
                for (var i = 0; i < navBoxChild.length; i++) {
                    if (scrollTop + (a * 2) >= textChild[i].offsetTop - 50) {
                        for (var j = 0; j < navBoxChild.length; j++) {
                            navBoxChild[j].className = "";
                        }

                        if (scrollTop + windowHeight == scrollHeight) {
                            //滑动到底部
                            navBoxChild[navBoxChild.length - 1].className = "active";
                        } else {
                            navBoxChild[i].className = "active";
                        }
                    }
                }
            }
            $('.back-to-top').click(function () { $('html,body').animate({ scrollTop: '0px' }, 500); });
        })
    </script>
    <script src='../../common/lib/big_img.js'></script>
    <script src='../../common/lib/photoswipe.min.js'></script>
    <script src='../../common/lib/photoswipe-ui-default.min.js'></script>
    <script src='../../common/lib/bigImg.js'></script>
    <script type="text/javascript" src="../../common/lib/jquery.raty.min.js"></script>
    <script type="text/javascript">
        $('#score-demo').raty({ score: 3.5 });
        $('#score-demo1').raty({ score: 3 });
    </script>
</body>

</html>